<template>
  <div class="home-page">

    <div class="hy2-content">
      <div class="hy-img" :class="[activeClass]">
        <img class="title" src="../assets/images/p3.png" />
      </div>
      <div class="hy-ft" :class="[activeClass]">
        <p class="p1">专业服务团队 </p>
        <p class="p2">地面服务，不等于土老粗 </p>
        <ul>
          <li>具备5年以上行业经验的专业地面服务管理团队。</li>
          <li>配备标准化培训及行为规范。</li>
          <li>20年以上经验数据及技术团队，将最先进的数据管理技术引入地面服务。</li>
          <li>全国性城配团队支撑，提供地面运输力量支撑。</li>
        </ul>
      </div>

    </div>

  </div>
</template>
<script>

export default {
  name: 'HomePage3',
  data() {
    return {
      activeClass: "",
      activeFontClass: ""
    }
  },
  mounted() {
    this.addAnimate();
  },
  methods: {
    addAnimate() {
      this.activeClass = "display animate__animated animate__fadeInUp animate__slow";
      this.activeFontClass = "display animate__animated animate__fadeInDown animate__slow animate__delay-2s"
    },
    removeAnimate() {
      this.activeClass = "";
      this.activeFontClass = "";
    }
  }
}
</script>
<style lang="scss" scoped>
.home-page {
  width: 100%;
  height: 100vh;
  background-color: #fff;
  background-size: cover;

  .hy2-content {
    padding-top: 260px;
    padding-left: 62px;
    display: flex;

    .hy-img {
      display: none;

      img {
        width: 864px;
        height: 378px;
      }
    }

    .hy-ft {
      flex: 1;
      display: none;
      padding-left: 66px;
      text-align: left;
      padding-top: 18px;
      .p1 {
        width: 385px;
        font-size: 48px;
        font-weight: bold;
        color: #333333;
      }

      .p2 {
        width: 428px;
        font-size: 30px;
        color: #333333;
      }

      ul {
        padding-top: 65px;
        li {
          list-style: none;
          width: 854px;
          font-size: 24px;
          font-weight: normal;
          color: #333333;
          line-height: 2;
        }
      }

    }
  }

  .display {
    display: block !important;
  }

}
</style>
